'use client'

import { CustomDialog } from '@/components/CustomDialog'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { LogOut, User, Settings, Camera } from 'lucide-react'
import { useState } from 'react'
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'next/navigation'
import { loginRedirect } from '@/assets/static'

export function UserSetting() {
  const [open, setOpen] = useState(false)
  const { user, clearAuth } = useAuthStore()
  const router = useRouter()

  const handleLogout = () => {
    clearAuth()
    setTimeout(() => {
      router.replace(loginRedirect)
      router.refresh()
    }, 200)
  }

  const handleProfileEdit = () => {
    setOpen(true)
  }

  return (
    <div className="absolute bottom-4 left-4">
      <CustomDialog
        title=""
        width="sm:max-w-[425px]"
        open={open}
        onOpenChange={setOpen}
      >
        <Card className="w-full outline-none shadow-none border-none">
          <CardHeader className="py-0">
            <CardTitle className="py-0 text-lg text-center">个人信息</CardTitle>
          </CardHeader>
          <CardContent className="p-4 outline-none">
            <div className="space-y-3">
              <div className="flex gap-2">
                <span className="text-gray-500">头像:</span>
                {user?.avatar ? (
                  <img
                    src={user.avatar}
                    alt="avatar"
                    className="w-8 h-8 rounded-full"
                  />
                ) : (
                  <User size={20} />
                )}
              </div>
              <div className="flex items-center gap-2">
                <span className="text-gray-500">昵称:</span>
                <span>{user?.nickname}</span>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-gray-500">账号:</span>
                <span>{user?.name}</span>
              </div>
            </div>
          </CardContent>
        </Card>
      </CustomDialog>

      <div className="w-full space-y-4">
        {/* 退出登录按钮 */}
        <Popover>
          <PopoverTrigger asChild>
            <button className="rounded-full overflow-hidden hover:opacity-80 transition-opacity">
              <User size={30} />
            </button>
          </PopoverTrigger>
          <PopoverContent className="w-48">
            <div className="space-y-2">
              {/* <Button
              variant="ghost"
              className="w-full justify-start gap-2 text-sm"
              onClick={handleAvatarChange}
            >
              <Camera size={16} />
              <span>更换头像</span>
            </Button> */}
              <Button
                variant="ghost"
                className="w-full justify-start gap-2 text-sm"
                onClick={handleProfileEdit}
              >
                <User size={16} />
                <span>个人信息</span>
              </Button>
              <Button
                variant="ghost"
                className="w-full justify-start gap-2 text-sm"
                onClick={handleLogout}
              >
                <LogOut size={16} />
                <span>退出登录</span>
              </Button>
              {/* <Button
              variant="ghost"
              className="w-full justify-start gap-2 text-sm"
              onClick={handleSettings}
            >
              <Settings size={16} />
              <span>账号设置</span>
            </Button> */}
            </div>
          </PopoverContent>
        </Popover>
      </div>
    </div>
  )
}
